<template>
  <div class="editor-password">
    <el-form ref="ruleFormRef" :model="editorPasswordForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="原始密码" prop="oldPassword">
        <el-input v-model="editorPasswordForm.oldPassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="editorPasswordForm.newPassword" type="password" autocomplete="off" :show-password="true" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="editorPasswordForm.confirmPassword" type="password" autocomplete="off" :show-password="true" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="savePwdHandler(ruleFormRef)">保存</el-button>
        <el-button @click="closeHandler">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { useKeepAliveStore, useTabsStore } from "@/stores";
import { reactive, ref } from "vue";
import type { ResetPassword } from "@/typings";
import { useRoute } from "vue-router";
defineOptions({
  name: "EditorPassword"
});
type EditorPasswordType = ResetPassword;

const ruleFormRef = ref<FormInstance>();
const route = useRoute();
const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const editorPasswordForm: EditorPasswordType = reactive({
  code: "",
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

/**
 * @description 原始密码校验
 * @param _ 规则
 * @param value 值
 * @param callback 回调
 */
const passwordVerify = (_: any, value: string, callback: (error?: string | Error) => void) => {
  if (value === editorPasswordForm.oldPassword) {
    callback(new Error("新密码不能与原始密码相同"));
  }
  callback();
};

/**
 * @description 确认密码校验
 * @param _ 规则
 * @param value 值
 * @param callback 回调
 */
const confirmPasswordVerify = (_: any, value: string, callback: (error?: string | Error) => void) => {
  if (value !== editorPasswordForm.newPassword) {
    callback(new Error("两次输入密码不一致!"));
  }
  callback();
};

/**
 * @description 表单验证
 */
const rules = reactive<FormRules<typeof editorPasswordForm>>({
  oldPassword: [
    { required: true, message: "请输入原始密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 ~ 16 个字符", trigger: "blur" }
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 ~ 16 个字符", trigger: "blur" },
    { validator: passwordVerify, trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    { validator: confirmPasswordVerify, trigger: "blur" }
  ]
});

/**
 * @description 保存
 */
const savePwdHandler = (ruleFormRef: FormInstance | undefined) => {
  if (!ruleFormRef) return false;
  ruleFormRef.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("请填写正确的表单信息进行提交");
      return;
    }
    ElMessage.warning("暂不支持该操作！！！");
    // const params = {
    //   userId: useUser.userInfo.userId,
    //   oldPassword: md5(editorPasswordForm.oldPassword),
    //   newPassword: md5(editorPasswordForm.newPassword)
    // };
    try {
      // const result = await editUserPwd(params);
      // if (result.code === 200) {
      //   ElMessage.success("修改密码成功");
      // } else {
      //   ElMessage.error(result.message);
      // }
    } catch (error) {
      ElMessage.error("修改密码失败，请稍后再试");
    }
  });
};

/**
 * @description 关闭
 */
const closeHandler = () => {
  const fullPath = route.fullPath;
  const name = tabStore.tabsMenuList.filter((item) => item.path == fullPath)[0].name || "";
  keepAliveStore.removeKeepAliveName(name);
  tabStore.closeTab(fullPath as string, true);
};
</script>

<style scoped lang=""></style>
